<template>
  <div class="main_content">
    <div class="informationWarpper">
      <div class="information_title">
        <div class="left_item">
          <span
            class="changeHanld"
            v-for="(item, index) in activeList"
            :key="index"
            :class="activeName == index ? 'active' : ''"
            @click="clickActive(index)"
          >{{ item }}</span>
        </div>

        <a class="more changeHanld" @click="goMore">查看更多</a>
      </div>
      <!-- 政策通知 -->
      <div style="min-height: 500px; z-index: 1" v-show="activeName == 0">
        <div
          class="information_concent"
          v-for="(item, index) in noticeList"
          :key="index"
          @mouseenter="currentIndex = index"
          @mouseleave="currentIndex = -1"
          :class="currentIndex === index ? 'active' : ''"
        >
          <div class="title_date">
            <!-- {{ item.title }} -->
            <a
              class="left_content singlerows changeHanld"
              :href="item.entranceUrl ? item.entranceUrl : '/inform/'+item.policyId"
            >{{ item.title }}</a>
            <div class="right_date" v-if="item.releaseTime">{{ item.releaseTime }}</div>
          </div>

          <div class="fromdata" v-if="currentIndex === index">
            <div class="fromdata_L">
              来源:
              <p @click="departmentInside(item.departmentId)">{{ item.departmentName }}</p>
              <button
                class="changeHanld"
                @click="
                  subScribe(item.departmentId, item.whetherAttention, index)
                "
                :class="item.whetherAttention == 0 ? '' : 'active'"
              >{{ item.whetherAttention == 0 ? "订阅" : "已订阅" }}</button>
            </div>
            <div class="fromdata_R">
              <span
                class="date"
                v-if="item.surplusDays != null && item.surplusDays > -1"
              >剩余{{ item.surplusDays }}天</span>
              <span class="monkey" v-if="item.projectPrice != null">最高{{ item.projectPrice }}万元</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 政策解读 -->
      <div style="min-height: 500px; z-index: 1" v-show="activeName == 1">
        <div
          v-show="scramList.length > 0 && activeName == 1"
          class="information_concent"
          v-for="(item, index) in scramList"
          :key="index"
          @mouseenter="currentIndex = index"
          @mouseleave="currentIndex = -1"
          :class="currentIndex === index ? 'active' : ''"
        >
          <div class="title_date">
            <a
              class="left_content singlerows changeHanld"
              :href="item.entranceUrl ? item.entranceUrl : '/gUDetails/'+item.id"
            >{{ item.title }}</a>
            <div
              class="right_date"
              v-if="item.declareTime && item.deadline"
            >申报时间： {{ item.declareTime }} - {{ item.deadline }}</div>
          </div>

          <div class="fromdata" v-if="currentIndex === index">
            <div class="fromdata_L">
              来源:
              <p @click="departmentInside(item.departmentId)">{{ item.departmentName }}</p>
              <button
                class="changeHanld"
                @click="
                  subScribe(item.departmentId, item.whetherAttention, index)
                "
                :class="item.whetherAttention == 0 ? '' : 'active'"
              >{{ item.whetherAttention == 0 ? "订阅" : "已订阅" }}</button>
            </div>
            <div class="fromdata_R">
              <span
                class="date"
                v-if="item.surplusDays != null && item.surplusDays > -1"
              >剩余{{ item.surplusDays }}天</span>
              <span class="monkey" v-if="item.projectPrice != null">最高{{ item.projectPrice }}万元</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 最新资讯 -->
      <div style="min-height: 500px; z-index: 1" v-show="activeName == 2 && newsList.length">
        <div
          v-show="activeName == 2"
          class="information_concent"
          v-for="(item, index) in newsList"
          :key="index"
          @mouseenter="currentIndex = index"
          @mouseleave="currentIndex = -1"
          :class="currentIndex === index ? 'active' : ''"
        >
          <div class="title_date">
            <a
              class="left_content singlerows changeHanld"
              :href="item.entranceUrl ? item.entranceUrl : '/newInform/'+item.id"
            >{{ item.title }}</a>
            <div
              class="right_date"
              v-if="item && item.createTime"
            >{{ item.createTime.split(" ")[0] }}</div>
          </div>
        </div>
      </div>
      <div
        v-show="activeName == 2 && !newsList.length"
        style="height:500px;background:#fff;color:#333;line-height:500px;text-align:center"
      >暂无数据</div>
    </div>
    <!-- 订阅部门选取关键字 -->
    <keyWord ref="keyWord" @onSubmit="attention"></keyWord>
    <!-- 登录弹窗 -->
    <login-dialog ref="login" @reload="reload"></login-dialog>
    <!-- 升级vip弹窗 -->
    <vip-dialog ref="vip" @toVip="toVip"></vip-dialog>
  </div>
</template>

<script>
import {
  getPolicyInformation,
  commonRequest,
  postRequest
} from "../../api/api.js";
import {
  queryPolicyList,
  interpretList,
  newsList,
  cancelAttention,
  departmentAttention
} from "../../api/api.js";
import { sessionTake, getToken } from "../../util/validate.js";
import { getCode } from "../../util/address.js";
import vipDialog from "../../components/vipDialog"; //升级vip弹窗
import loginDialog from "../../components/login_item/LoginDialog";
import keyWord from "../../components/keyWord.vue"; //部门订阅关键字
export default {
  name: "country_modules",
  components: {
    loginDialog,
    keyWord,
    vipDialog
  },
  props: {
    noticeList: {
      type: Array,
      default: []
    },
    scramList: {
      type: Array,
      default: []
    },
    newsList: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      loading1: true,
      loading2: true,
      centerDiaogVisible: false, // 隐藏关注框
      DiaogVisible: false, // 隐藏登录框
      getinfo: [], // 获取政策资讯
      currentIndex: null, // 显示图层

      cityName: "",
      provinceName: "",

      scramble: [],
      activeName: 0,
      activeList: ["政策通知", "政策解读", "最新资讯"],
      newInformation: [] // 最新资讯列表
    };
  },
  watch: {
    noticeList(newval) {
      this.noticeList = newval;
    },
    scramList(newval) {
      this.scramList = newval;
    },
    newsList(newval) {
      this.newsList = newval;
    }
  },
  mounted() {
    this.provinceName = sessionTake("provinceName");
    this.cityName = sessionTake("cityName");
  },
  methods: {
    // 登录刷新当前页
    reload() {
      location.reload();
    },
    departmentInside(id) {
      this.$router.push({
        path: "/departmentInside",
        query: {
          id: id
        }
      });
    },
    // 查看更多
    goMore() {
      let provinceName = sessionTake("provinceName");
      let cityName = sessionTake("cityName");
      let routerNameArr = [
        "policyNotice",
        "governmentUnscramble",
        "newsInfomation"
      ];
      let params = {
        province: "",
        city: ""
      };
      let routerName =
        this.activeName === 0
          ? routerNameArr[0]
          : this.activeName === 1
          ? routerNameArr[1]
          : routerNameArr[2];
      if (provinceName && cityName) {
        params.province = provinceName;
        params.city = cityName;
        this.$router.push({
          name: routerName,
          params: params
        });
      } else {
        this.$router.push({
          name: routerName
        });
      }
    },
    // 选中的活动
    clickActive(index) {
      this.activeName = index;
      // this.getPolicyInfo(index);
    },
    isControlShow() {
      this.centerDiaogVisible = false;
    },
    // 点击订阅
    subScribe(id, val, index) {
      if (!getToken()) {
        this.$refs.login.open();
        return;
      }
      if (val === 1) {
        // 取消关注
        cancelAttention(id).then(res => {
          if (res.code === 200) {
            this.$emit("updateList");
            this.$message.success({
              message: "取消订阅成功",
              type: "success"
            });
          } else {
            this.$message.error(res.message);
          }
        });
      } else if (val === 0) {
        this.$refs.keyWord.open(id);
      }
    },
    // 订阅
    attention(id, keyWord) {
      let params = {
        departmentId: id,
        keywords: keyWord
      };
      departmentAttention(params).then(res => {
        if (res.code === 10001) {
          this.$refs.login.open();
        } else if (res.code === 10002) {
          this.$refs.vip.open();
        } else if (res.code == 200) {
          this.$emit("updateList");
          this.$message({
            type: "success",
            message: "订阅成功"
          });
        } else {
          this.$message({
            type: "warning",
            message: res.message
          });
        }
      });
    },
    toVip() {
      window.open("/pageVIP", "_balnk");
    }
  }
};
</script>

<style lang="less" scoped>
.contents_qydb {
  width: 200px;
  margin-left: 22px;
  margin-top: 20px;

  .goVip {
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 55px;
    align-items: center;
    justify-content: center;
    width: 100%;
    left: 0;

    .top {
      font-size: 14px;
      color: #000;
    }

    .bn {
      font-size: 14px;
      color: #1d78de;
    }
  }
}
.option {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 40px;
  bottom: 10px;
  width: 100%;
  font-size: 14px;
  left: 0;

  .spans_qydb {
    background-color: #bfbfbf;
    padding: 4px 30px;
    color: #fff;
    cursor: pointer;
    border-radius: 30px;
  }

  .ps_qydb {
    border-radius: 30px;
    background-color: #1d78de;
    padding: 4px 30px;
    color: #fff;
    cursor: pointer;
    // bottom: 15px;
    // right: 26px;
    // width: 159px;
    // height: 44px;
    // cursor: pointer;
  }
}

.imgs_qydb {
  width: 100%;
  border-radius: 10px;
}

/* 弹框的结束 */
.main_content {
  // margin: 20px auto;
  display: flex;
  justify-content: space-between;
}

.informationWarpper {
  width: 780px;
  color: #999;

  .information_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;

    span {
      font-size: 14px;
      margin-right: 60px;
      color: #333;

      &.active {
        position: relative;
        font-size: 18px;
        color: #000;
        font-weight: 700;
        // text-decoration:;
        &::before {
          content: "";
          position: absolute;
          bottom: -11px;
          left: 5px;
          width: 60px;
          height: 3px;
          border-bottom: 2px solid #44a2ff;
        }
      }
    }

    .more {
      font-size: 14px;
      padding-right: 20px;
      color: #44a2ff;
    }
  }

  .information_concent {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background-color: #fff;
    border-bottom: 1px solid rgba(167, 166, 166, 0.2);
    height: 55px;
    color: #333;
    padding: 0 15px;
    &.active {
      height: 70px;
      color: #44a2ff;
      .fromdata {
        color: #000;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 6px;
        margin-left: 10px;

        .fromdata_L {
          display: flex;
          align-items: center;
          font-size: 14px;
          color: #ccc;

          p {
            margin-left: 6px;
            font-size: 14px;
            cursor: pointer;
          }

          button {
            font-size: 14px;
            padding: 2px 15px;
            background-color: #fff;
            border: #44a2ff 1px solid;
            color: #44a2ff;
            border-radius: 4px;
            margin: 0 10px;

            &.active {
              background: rgb(203, 220, 232);
              color: rgb(255, 255, 255);
              border: none;
            }
          }
        }

        .fromdata_R {
          span {
            font-size: 14px;
            padding: 4px 6px;
            margin: 0 10px;
          }

          .monkey {
            color: #f24d3a;
            background-color: #ffebe8;
            margin-right: 20px;
          }

          .date {
            color: #f8a231;
            background-color: #fff1de;
          }
        }
      }

      .left_content {
        font-size: 16px;
      }

      .right_date {
        font-size: 12px;
      }
      .title_date {
        a {
          color: #44a2ff;
        }
      }
    }

    .title_date {
      display: flex;
      font-size: 12px;
      justify-content: space-between;
      a {
        color: #333;
        cursor: pointer;
      }
    }
  }

  .left_content {
    width: 470px;
    font-size: 14px;
  }

  .right_date {
    margin-left: -20px;
    font-size: 12px;
  }
}

.public {
  .public_title {
    height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 14px 0;

    .click_more {
      color: #000;
      font-weight: 700;
      // font-size: 18px;
      display: flex;
      align-items: center;

      img {
        width: 20px;
        height: 20px;
        margin-right: 10px;
      }
    }

    .examine {
      color: #44a2ff;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
    }

    span {
      margin-left: 34px;
      position: relative;
      font-size: 18px;
      z-index: 1;

      &::before {
        content: "";
        position: absolute;
        height: 20px;
        width: 20px;
        top: 1px;
        left: -34px;
        background-color: #1677ff;
      }

      &::after {
        content: "";
        position: absolute;
        height: 15px;
        width: 15px;
        top: 7px;
        left: -26px;
        background-color: #76ddfb;
      }
    }
  }

  .public_contont {
    background-color: #fff;
    padding: 10px 30px;
    width: 347px;
  }
}
</style>
